import React, { useState } from 'react';
import './CoolAlert.css'; // 引入 CSS 文件

const CoolAlert = ({ message, type = 'info', onClose }) => {
    const [isVisible, setIsVisible] = useState(true);

    const handleClose = () => {
        setIsVisible(false);
        if (onClose) {
            onClose();
        }
    };

    // 根据类型设置不同的样式
    const alertClass = `cool-alert ${type}`;

    return (
        isVisible && (
            <div className={alertClass}>
                <div className="cool-alert-content">
                    <span className="cool-alert-message">{message}</span>
                    <button className="cool-alert-close" onClick={handleClose}>
                        好的，说谢谢
                    </button>
                </div>
            </div>
        )
    );
};

export default CoolAlert;